<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="/static/webCss/dalxgl.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue"  style="font-size: medium">

        <div class="content row" id="lxgl">
            <div class="modal" id="lxxzModal" data-backdrop="static" >
                <div class="modal-dialog" style="height: 500px">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">选择档案类型</h4>
                        </div>
                        <div class="modal-body" style="height: 650px;overflow: auto">
                            <div id="lxTree"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="close">关闭</button>
                            <button @click="sureLxSelect" type="button" class="btn btn-primary">确认选择</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <div class="modal" id="lxxzModal2" data-backdrop="static" >
                <div class="modal-dialog" style="height: 500px">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">选择档案类型</h4>
                        </div>
                        <div class="modal-body">
                            <div id="lxTree2"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="close2">关闭</button>
                            <button @click="sureLxSelect2" type="button" class="btn btn-primary">确认选择</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <div class=" col-xs-4" style="width:21%;">
                <div class="" style="height: 700px;overflow: auto">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="nav-tabs-custom col-xs-8">
                <ul class="nav nav-tabs pull-right">
                    <li style="float: left" class="active"><a href="#scdalx" data-toggle="tab">删除档案类型</a></li>
                    <li style="float: left"><a href="#xzdalx" data-toggle="tab">新增档案类型</a></li>
                </ul>
                <div class="tab-content no-padding">
                    <div class="tab-pane active" id="scdalx"
                         style="position: relative; height: auto;overflow: auto">
                        <div class="">
                            <!--<div class="box-header with-border">-->
                                <!--<h3 class="box-title">删除档案类型</h3>-->
                            <!--</div>-->
                            <div class="box-body" style="margin-left: 300px">
                                <div class="form-group">
                                    <label>当前档案类型</label>
                                    <div class="input-group">
                                        <span class="input-group-addon btn btn-primary" data-toggle="modal" data-target="#lxxzModal" @click="kjSelect">选择</span>
                                        <input name="dalx" type="text" class="form-control input-sm" v-model="dqLx" readonly style="width: 400px">
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <div class="text-center" style="margin-top: 300px">
                                    <button class="btn btn-primary" @click="deleteById" style="background-color: #2C72E8">删除该类型</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="xzdalx" style="position: relative; height: auto;overflow: auto">
                        <div class="">
                            <form role="form">
                                <div class="box-body" style="margin-left: 300px">
                                    <div class="form-group">
                                        <label>上级档案类型</label>
                                        <div class="input-group">
                                            <span class="input-group-addon btn btn-primary" data-toggle="modal" data-target="#lxxzModal2" @click="kjSelect2">选择</span>
                                            <input name="dalx" type="text" class="form-control input-sm" v-model="parentLxName2" readonly style="width: 400px">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label >新增档案类型名字</label>
                                        <input v-model="newLx.dalxName" name="lxName" type="text" class="form-control" style="width: 454px">
                                    </div>
                                    <div class="form-group">
                                        <label >新增档案类型(类别)</label>
                                        <input v-model="newLx.code" name="lxName" type="text" class="form-control" style="width: 454px">
                                    </div>
                                </div>
                                <!-- /.box-body -->

                                <div class="box-footer">
                                    <div class="text-center" style="margin-top: 150px">
                                        <button @click.prevent="mySubmit" type="submit" class="btn btn-primary" style="background-color: #2C72E8">新增档案类型</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
        <script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js?v=shujubuwqd12138"></script>
        <script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/dalxgl.css");
    function getid(data,type) {
        for(var i = 0 ;i < data.length;i++){
            if(data[i].text == type){
                vue.$data.parentLx == data[i].id;
                break;
            }else {
                getid(data[i].nodes);
            }
        }
    }
    //得到treeview层级
    var cj = 1;
    function getCj(data) {
        for(var i = 0 ;i < data.length;i++){
            if(data[i].nodes == null){
                continue;
            }else {
                cj++;
                getCj(data[i].nodes);

            }
        }
        return cj;
        cj = 1;
    }
    var vue = new Vue({
        el:'#lxgl',
        data:{
            parentLxName2:null,
            dqLx2:null,//当前类型
            dqLxid2:null,
            parentLx2:null,
            dqLx:null,//当前类型
            dqLxid:null,
            parentLxName:null,
            parentLx:null,
            allLx:null,
            allLx2:null,
            newLx:{
                dalxName:null,
                parentId:null,
                code:null
            }
        },
        methods:{
            sureLxSelect:function(){
                if(vue.$data.parentLxName == '科技档案' || vue.$data.parentLxName == '文书档案'){
                    vue.$data.parentLxName = null;
                    vue.$data.parentLx = null;
                    cxAlert('科技，文书档案无法删除！');
                }
                $('#lxxzModal').modal('hide');
            },
            close:function(){
                $('#lxxzModal').modal('hide');
            },
            sureLxSelect2:function(){
                $('#lxxzModal2').modal('hide');
            },
            close2:function(){
                $('#lxxzModal2').modal('hide');
            },
            kjSelect:function(){
                var myMsg = cxLoad("选择中");
                this.$http.get('/dagl/api/queryDalx').then( function (result) {
                    var node = new Array();
                    var data = result.body;
                    if(data.code == 200){
                        layer.close(myMsg);
                        //getid(data.data);
                        data = data.data[0].nodes;
                        //console.log(data);
                        $('#lxTree').treeview({
                            color: "#428bca",
                            collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
                            // nodeIcon: "glyphicon glyphicon-user",
                            emptyIcon: "glyphicon glyphicon-file",//设置列表树中没有子节点的节点的图标
                            expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
                            highlightSearchResults:true,//是否高亮搜索结果 默认true
                            highlightSelected:true,     //是否选中高亮显示
                            onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                            levels: 0 ,                 //设置初始化展开几级菜单 默认为2
                            //selectedIcon: 'glyphicon glyphicon-tint',
                            showBorder:true,                //是否显示边框
                            showCheckbox:false,              //是否显示多选框
                            data:data,
                            showTags:true,
                            onNodeSelected:function(event, data) {
                                vue.$data.parentLxName = data.text;
                                vue.$data.dqLxid = data.id;
                                vue.$data.dqLx = data.text;
                                vue.$data.parentLx = data.id;
                            }
                        });
                    }else{
                        layer.close(myMsg);
                        cxAlert(data.mess);
                    }
                })
            },
            kjSelect2:function(){
                var myMsg = cxLoad("选择中");
                this.$http.get('/dagl/api/queryDalx').then( function (result) {
                    var node = new Array();
                    var data = result.body;
                    if(data.code == 200){
                        layer.close(myMsg);
                        //getid(data.data);
                        data = data.data[0].nodes;
                        //console.log(data);
                        $('#lxTree2').treeview({
                            color: "#428bca",
                            collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
                            // nodeIcon: "glyphicon glyphicon-user",
                            emptyIcon: "glyphicon glyphicon-file",//设置列表树中没有子节点的节点的图标
                            expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
                            highlightSearchResults:true,//是否高亮搜索结果 默认true
                            highlightSelected:true,     //是否选中高亮显示
                            onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                            levels: 0 ,                 //设置初始化展开几级菜单 默认为2
                            //selectedIcon: 'glyphicon glyphicon-tint',
                            showBorder:true,                //是否显示边框
                            showCheckbox:false,              //是否显示多选框
                            data:data,
                            showTags:true,
                            onNodeSelected:function(event, data) {
                                vue.$data.parentLxName2 = data.text;
                                vue.$data.dqLxid2 = data.id;
                                vue.$data.dqLx2 = data.text;
                                vue.$data.parentLx2 = data.id;
                            }
                        });
                    }else{
                        layer.close(myMsg);
                        cxAlert(data.mess);
                    }
                })
            },
            deleteById:function(){
                if(vue.$data.dqLx == null){
                    cxAlert("请选择档案类型")
                }else {
                    var myMsg = cxLoad("删除中");
                    this.$http.get('/dagl/api/deleteDalx?id='+this.dqLxid).then( function (result) {
                        var data = result.body;
                        if (data.code == 200) {
                            layer.close(myMsg);
                            this.$http.get('/dagl/api/queryDalx').then( function (result) {
                                var data = result.body;
                                if(data.code == 200){
                                    cxAlertOk("删除成功");
                                    vue.$data.dqLx = null;
                                    vue.$data.parentLxName = null;
                                    $('#tree').treeview({
                                        color: "#428bca",
                                        collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
                                        // nodeIcon: "glyphicon glyphicon-user",
                                        emptyIcon: "glyphicon glyphicon-file",//设置列表树中没有子节点的节点的图标
                                        expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
                                        highlightSearchResults:true,//是否高亮搜索结果 默认true
                                        highlightSelected:true,     //是否选中高亮显示
                                        onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                                        levels: getCj(data.data) ,                 //设置初始化展开几级菜单 默认为2
                                        //selectedIcon: 'glyphicon glyphicon-tint',
                                        showBorder:true,                //是否显示边框
                                        showCheckbox:false,              //是否显示多选框
                                        data:data.data,
                                        showTags:true,
                                        onNodeSelected:function(event, data) {
                                            vue.$data.parentLxName = data.text;
                                            vue.$data.dqLxid = data.id;
                                            vue.$data.dqLx = data.text;
                                            vue.$data.parentLx = data.id;
                                        }
                                    });
                                }else{
                                    cxAlert(data.mess);
                                }
                            })
                            this.$http.get('/dagl/api/queryAllLx').then( function (result) {
                                var data = result.body;
                                if(data.code == 200){
                                    var name = new Array();
                                    for(var i = 0;i < data.data.length;i++){
                                        if(data.data[i].dalxName == "科技档案" || data.data[i].dalxName == "文书档案"){
                                            continue;
                                        } else {
                                            name.push(data.data[i]);
                                        }
                                    }
                                    this.allLx = name;
                                    this.allLx2 = data.data;
                                }else{
                                    cxAlert(data.mess);
                                }
                            })
                        }else{
                            cxAlert(data.mess)
                        }
                    });
                }
            },
            mySubmit:function () {
                if(vue.$data.parentLxName2 == null){
                   cxAlert("请选择档案类型")
                }else {
                    var bootstrapValidator1 = $("form").data('bootstrapValidator');
                    bootstrapValidator1.validate();
                    if(bootstrapValidator1.isValid()){
                        this.newLx.parentId = this.parentLx2;
                        var myMsg = cxLoad("添加中");
                        this.$http.post('/dagl/api/addDalx',this.newLx, { emulate: true }).then( function (result) {
                            var data = result.body;
                            if(data.code == 200){
                                layer.close(myMsg);
                                cxAlertOk("添加成功");
                                this.$http.get('/dagl/api/queryDalx').then( function (result) {
                                    var data = result.body;
                                    if(data.code == 200){
                                        $('#tree').treeview({
                                            color: "#428bca",
                                            collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
                                            // nodeIcon: "glyphicon glyphicon-user",
                                            emptyIcon: "glyphicon glyphicon-file",//设置列表树中没有子节点的节点的图标
                                            expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
                                            highlightSearchResults:true,//是否高亮搜索结果 默认true
                                            highlightSelected:true,     //是否选中高亮显示
                                            onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                                            levels: getCj(data.data) ,                 //设置初始化展开几级菜单 默认为2
                                            //selectedIcon: 'glyphicon glyphicon-tint',
                                            showBorder:true,                //是否显示边框
                                            showCheckbox:false,              //是否显示多选框
                                            data:data.data,
                                            showTags:true,
                                            onNodeSelected:function(event, data) {
                                                vue.$data.parentLx = data.id;
                                                vue.$data.parentLxName = data.text;
                                                vue.$data.dqLxid = data.id;
                                                vue.$data.dqLx = data.text;
                                            }
                                        });
                                        this.$http.get('/dagl/api/queryAllLx').then( function (result) {
                                            var data = result.body;
                                            if(data.code == 200){
                                                //this.allLx = data.data;
                                                var name = new Array();
                                                for(var i = 0;i < data.data.length;i++){
                                                    if(data.data[i].dalxName == "科技档案" || data.data[i].dalxName == "文书档案"){
                                                        continue;
                                                    } else {
                                                        name.push(data.data[i]);
                                                    }
                                                }
                                                this.allLx = name;
                                                this.allLx2 = data.data;
                                            }else{
                                                cxAlert(data.mess);
                                            }
                                        })
                                        $("form").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
                                    }else{
                                        cxAlert(data.mess);
                                    }
                                })

                                //this.parentLx=null;
                                this.newLx.dalxName=null;
                                this.newLx.parentId=null;
                                this.newLx.code = null;
                            }else{
                                layer.close(myMsg);
                                cxAlert(data.mess);
                            }
                        })
                    }
                }
            }
        },
        created:function(){
            this.$http.get('/dagl/api/queryAllLx').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    var name = new Array();
                    for(var i = 0;i < data.data.length;i++){
                        if(data.data[i].dalxName == "科技档案" || data.data[i].dalxName == "文书档案"){
                            continue;
                        } else {
                            name.push(data.data[i]);
                        }
                    }
                    this.allLx = name;
                    this.allLx2 = data.data;
                }else{
                    cxAlert(data.mess);
                }
            })
        },
        mounted:function () {
            $('form').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    parentLx: {
                        validators: {
                            notEmpty: {
                                message: '父类型信息不能为空'
                            }
                        }
                    },
                    lxName: {
                        validators: {
                            notEmpty: {
                                message: '档案类型名不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '档案类型名字段长度不能超过20'
                            }
                        }
                    },
                    code: {
                        validators: {
                            stringLength: {
                                max: 10,
                                message: 'code字段长度不能超过10'
                            }
                        }
                    }
                }
            });

            this.$http.get('/dagl/api/queryDalx').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    var text = getCj(data.data);
                    $('#tree').treeview({
                        color: "#428bca",
                        collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
                        // nodeIcon: "glyphicon glyphicon-user",
                        emptyIcon: "glyphicon glyphicon-file",//设置列表树中没有子节点的节点的图标
                        expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
                        highlightSearchResults:true,//是否高亮搜索结果 默认true
                        highlightSelected:true,     //是否选中高亮显示
                        onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                        levels: getCj(data.data) ,                 //设置初始化展开几级菜单 默认为2
                        //selectedIcon: 'glyphicon glyphicon-tint',
                        showBorder:true,                //是否显示边框
                        showCheckbox:false,              //是否显示多选框
                        data:data.data,
                        showTags:true,
                        onNodeSelected:function(event, data) {
                            if(data.text == '科技档案' || data.text == '文书档案'){
                                cxAlert("科技，文书档案类型无法删除！");
                            }else if(data.text == '胶州'){
                                cxAlert('根目录无法删除！')
                            }else {
                                vue.$data.parentLx = data.id;
                                vue.$data.parentLxName = data.text;
                                vue.$data.dqLx = data.text;
                                vue.$data.dqLxid = data.id;
                            }
                            //console.log(data)
                        }
                    });
                }else{
                    cxAlert(data.mess);
                }
            })
        }
    });



</script>

</body>
</html>
